<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.group {
	background: url(../Groups/groupimages/grpsize7.png) center;
	background-size: 100% 100%;
	width: 510px;
	height: 360px;
	text-align: center;
	position: absolute;
	left: 10%;
	top:15%;
	font-size: 13px;
	color: white;
}

.option1 {
	
}

.option2 {
	background-color: #f1f1f1;
}

.list li:HOVER {
	background-color: honeydew;
}

.list li {
	height: 20px;
}

.list {
	background: floralwhite;
	list-style-type: none;
	text-align: left;
	padding: 0px;
	margin: 0px;
	width: 200px;
	border: 1px cyan solid;
	display: none;
}

.listshow {
	border: 1px silver solid;
	box-shadow: 2px 0px 2px silver;
	width: 202px;
}

.listdiv:HOVER ul {
	display: block;
}

.listdiv:HOVER img {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg); /* IE 9 */
	-moz-transform: rotate(180deg); /* Firefox */
	-webkit-transform: rotate(180deg); /* Safari and Chrome */
	-o-transform: rotate(180deg); /* Opera */
}

.listdiv {
	width: 200px;
}
</style>
<script type="text/javascript" src="../Groups/groupsDisplay.js"></script>

<title>Your Current Group</title>
</head>

<body onLoad="displayImage(2)">
	<br />
	<table width=100%>
		<tr>
			<td align="left" valign="top"><input id="Button1" type="button"
				value="Create New Group" onclick= /></td>
			<td align="right" valign="top">
				<div class="listdiv">
					<div class="listshow">
						Available Groups<img id="arrow" src="../assets/arrow_up.png"
							style="height: 20px; width: 20px; float: right;"></img>
					</div>
					<ul class="list" contenteditable="false">
						<li class="option1" id="option" onClick="displayImage(1)">Group
							1 - Sakshi</li>
						<li class="option2" onClick="displayImage(2)">Group 2 - Jatin</li>
						<li class="option1" onClick="displayImage(5)">Group 3 -
							Saurav Yadav</li>
						<li class="option2" onClick="displayImage(3)">Group 4 - Adesh</li>
					</ul>
				</div>
			</td>
		</tr>
	</table>
	<br />
	<br />
	<br />
	<div class="group" id="group">
		<p id=p1 style="position: relative;">
			Name<br>Hello
		</p>
		<p id=p2 style="position: relative;">
			Name<br>Hello2
		</p>
		<p id=p3 style="position: relative;">
			Name<br>Hello3
		</p>
		<p id=p4 style="position: relative;">
			Name<br>Hello4
		</p>
		<p id=p5 style="position: relative;">
			Name<br>Hello5
		</p>
		<p id=p6 style="position: relative;">
			Name<br>Hello6
		</p>
		<p id=p7 style="position: relative;">
			Name<br>Hello7
		</p>
		<p id=p8 style="position: relative;"></p>
		<p id=p9 style="position: relative;">
			Name<br>Hello9
		</p>
		<p id=p10 style="position: relative;">
			Name<br>Hello10
		</p>
		<p id=manager
			style="position: relative; font-weight: bold; font-size: 15px;">
			Name<br>HelloM
		</p>
	</div>

	<br />
	<br />
	<table style="position:absolute; top: 90%; left: 40%;">
		<tr>
			<td align="center"><input id="Button1" type="button"
				value="Leave this group"
				onclick="window.location.href='GroupSelectionPage.html'" /></td>
		</tr>
	</table>


</body>
</html>
